<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Smart House</title>
    <link rel="stylesheet" th:href="@{css/joystick.css}">
    <link rel="stylesheet" th:href="@{css/main-page.css}">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script th:src="@{js/home.js}" defer></script>
    <script th:src="@{js/canvas.js}" defer></script>
</head>
<body>

<div class="header">
    <div>
        <h1 class="heading logo">SmartHouse</h1>
    </div>
    <div style="display: flex">
        <form action="/login">
            <button class="button">
                <span class="enter">Войти</span>
            </button>
        </form>

        <form action="/registration">
            <button class="button">
                <span class="enter">Зарегистрироваться</span>
            </button>
        </form>

    </div>
</div>

<div class="page-content">
    <!-- 
    <div class="main-card" style=" margin-left: 300px;">
        <h1 class="heading">Светодиод</h1>
        <div class="color-buttons">
            <button id="buttonRed" class="red-button"></button>
            <button id="buttonGreen" class="green-button"></button>
            <button id="buttonBlue" class="blue-button"></button>
        </div>
    </div> 
    -->
    <div class="main-card">
        <h1 class="heading" style="margin-top: 0; margin-bottom: 10px">Светодиод</h1>
        <input type="range" min="0" max="255" step="1" value="0" id="red" onchange="redColor()" style="margin-bottom: 10px"> <br>
        <input type="range" min="0" max="255" step="1" value="0" id="green" onchange="greenColor()" style="margin-bottom: 10px"> <br>
        <input type="range" min="0" max="255" step="1" value="0" id="blue" onchange="blueColor()"> 
    </div>
    <div class="main-card voice-button-card">
        <div class="voice-button-card-part">
            <h1 class="heading">Звук</h1>
            <button id="buttonSound" class="voice-button"
                    onclick="this.className = (this.className == 'voice-button' ? 'voice-button-active' : 'voice-button')"></button>
        </div>
        <div class="voice-button-card-part">
            <h1 class="heading">Кнопка</h1>
            <button id="button-light" class="button-light"></button>
        </div>
    </div>
</div>

<div style="display: flex">
    <div id="new-joistik" class="joistik">
        <div class="new-joistmamipulator"></div>
    </div>
    <div style="margin-left: 168px">
        <canvas id="canvas" width="300" height="300" style="position: absolute; "></canvas>
        <canvas id="ball" width="100" height="300" style="position: relative; z-index: 1000"></canvas>
        <canvas id="line" width="300" height="300" style=" position: relative;"></canvas>
        <canvas id="first-line" width="300" height="300" style="position: absolute; margin-left: -410px;"></canvas>

    </div>
    <div class="main-card" style="margin: 0 1%; height: fit-content; position: absolute; margin-left: 65%;">
        <div style="display: flex; justify-content: space-around;">
            <button id="buttonStart" class="button"><span class="enter">Start Button</span></button>
            <button id="buttonStop" class="button"><span class="enter">Stop Button</span></button>
        </div>
        <div style="display: flex; justify-content: space-around;">
            <button id="joystickStart" class="button"><span class="enter">Start JoyStick</span></button>
            <button id="joystickStop" class="button"><span class="enter">Stop JoyStick</span></button>
        </div>
        <div style="display: flex; justify-content: space-around;">
            <button id="buttonFan" class="button"> <span class="enter">Fan</span></button>
        </div>
    </div>
</div>

</body>
</html>